<template class="80%">
  <div style="font: 14px/1.5 微软雅黑, 黑体, Arial, Helvetica, sans-serif; padding-left: 0%; padding-top: 0%; width: 100%; height: 100%;">
    <div class="basicsData_list clearfix">
            <div class="basicsData_item basicsColor_01 fl">
                <h2 class="basicsData_name">学员人数</h2>
                <div class="basicsData_con clearfix">
                    <div class="basicsData_numbar">
                        <span class="basicsData_stu">{{countOfStudent}}</span>
                        <small>人</small>
                    </div>
                   
                </div>
            </div>
            <div class="basicsData_item basicsColor_06 fr">
                <h2 class="basicsData_name">考试次数</h2>
                <div class="basicsData_con clearfix">
                    <div class="basicsData_numbar">
                        <span id="examNum">{{timesOfExam}}</span>
                        <small>次</small>
                    </div>
                </div>
            </div>
            <div class="basicsData_item basicsColor_02 basicsData_height fl">
                <h2 class="basicsData_name">章节</h2>
                <div class="basicsData_con clearfix">
                    <div class="basicsData_numbar fl"><span class="tranNumber_zhangjie basicsData_zj">8</span>
                        <small>个</small>
                    </div>
                    <div class="basicsData_table fl" style="margin-top:30px">
                        <div class="basicsData_middle">
                            <ul class="basicsData_text">
                                    <li style="border-bottom:1px solid rgba(255,255,255,0.2);margin-bottom:8px;font-weight:500">章节<span class="allnum">0</span>个</li>
                                    <li>视频<span class="allnum">0</span>个(总时长<span class="allnum">0</span>分钟)</li>
                                    <li>音频<span class="allnum">0</span>个</li>
                                    <li>文档<span class="allnum">0</span>个</li>
                                    <li>其他资料<span class="allnum">0</span>个
                                    </li>
                            </ul>
                        </div>
                    </div>
                </div>
                    <p class="otherTips">其他资料包括图片、压缩包等资源</p>
            </div>
            <div class="basicsData_item basicsColor_03 fl">
                <h2 class="basicsData_name">题库总数</h2>
                <div class="basicsData_con clearfix">
                    <div class="basicsData_numbar">{{ countOfQuestionBank }}
                        <small>题</small>
                    </div>
                    <div class="basicsData_table fl" style="left: 183px;top:72px">
                        <div class="basicsData_middle">
                            <ul class="basicsData_text">
                                <li>今日新增题目 {{countOfQuestionBankCreatedAtToday}}题</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="basicsData_item basicsColor_08 fr">
                <h2 class="basicsData_name">讨论区</h2>
                <div class="basicsData_con clearfix">
                    <div class="basicsData_numbar fl">
                        <span class="tranNumber_zhangjie basicsData_bbs" id="bbsNum">3</span>
                        <small>个</small>
                    </div>
                    <div class="basicsData_table fl">
                        <div class="basicsData_middle">
                            <ul class="basicsData_text">
                                <li>发表话题<span class="allnum" id="topicNum">1</span>个
                                </li>
                                <li>回复话题<span class="allnum" id="replyNum">2</span>个</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>
 
</template>

<script>
import statistic from '@/api/statistic'

export default {
  name: 'StatisticOverview',
  data () {
    return {
      countOfStudent:0,
      countOfQuestionBank:0,
      countOfQuestionBankCreatedAtToday:0,
      timesOfExam:0,
    }
  },
  created () {
    this.getStatistic()
  },
  methods: {
    async getStatistic () {
      await statistic.getStatistic().then((resp) => {
        console.log(resp.data)
        debugger;
        if (resp.code === 200) {
          this.countOfStudent = resp.data.countOfStudent
          this.countOfQuestionBank = resp.data.countOfQuestionBank
          this.countOfQuestionBankCreatedAtToday = resp.data.countOfQuestionBankCreatedAtToday
          this.timesOfExam = resp.data.timesOfExam
        }
      })
    }
    
  }
}
</script>

<style scoped lang="scss">

.el-container {
  width: 100%;
  height: 100%;
}

.el-container {
  animation: leftMoveIn .7s ease-in;
}

.basicsData_list {
    height: 580px;
    position: relative;
}

.clearfix {
    zoom: 1;
}


.basicsData_table {
    margin-top: 14px;
    position: absolute;
    left: 140px;
    right: 30px;
    top: 60px;
    width: 148px;
}
.basicsData_item {
    width: 333px;
    height: 187px;
    color: #FFF;
    border-radius: 8px;
    position: absolute;
}

.basicsColor_01 {
    background-color: #67dac1;
    left: 20px;
    top: 0;
}
.basicsColor_02 {
    background-color: #fe9f7f;
    left: 373px;
    top: 0;
}
.basicsColor_03 {
    background-color: #fb7293;
    left: 723px;
    top: 0;
}

.basicsColor_06 {
    background-color: #d2aaf2;
    left: 723px;
    top: 206px;
}

.basicsColor_08 {
    background-color: #9d91f2;
    left: 20px;
    top: 206px;
}

.fl {
    float: left;
}

.basicsData_con {
    margin: 0 30px;
}

.basicsData_name {
    line-height: 28px;
    font-size: 20px;
    padding: 30px 0 0 30px;
    font: 20px/1.5 微软雅黑, 黑体, Arial, Helvetica, sans-serif;
}

.staTabName li {
    width: 134px;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    color: #474C59;
    text-align: center;
    float: left;
    position: relative;
    cursor: pointer;
}


.basicsData_numbar {
    line-height: 48px;
    font-size: 42px;
    margin-top: 42px;
    font-family: D-DIN;
}

.basicsData_middle {
    height: 108px;
    left: 10px;
    display: table;
}

.basicsData_text li {
    padding-bottom: 7px;
}

.basicsData_text .allnum, .basicsData_stick .allnum {
    margin: 0 px;
}

ul, ol, li {
    list-style-type: none;
}

* {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased
}

.otherTips {
    color: rgba(255, 255, 255, 0.8);
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 70px;
    font: 12px/1.5 微软雅黑, 黑体, Arial, Helvetica, sans-serif;
}

.basicsData_height {
    height: 393px;
}

.statistics_head {
    margin: 0;
}

@keyframes leftMoveIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
</style>
